<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="星际探险家 - 一款太空冒险射击游戏">
    <meta name="keywords" content="太空游戏,射击游戏,HTML5游戏">
    <title>星际探险家</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div class="space-background" id="spaceBackground"></div>
    <div class="game-container">
        <canvas id="game-canvas"></canvas>
        
        <!-- 技能图标区域 -->
        <div class="abilities-container">
            <div class="ability-icon" id="shield-ability">
                <div class="ability-inner">
                    <i class="ability-symbol">🛡️</i>
                    <span class="ability-key">E</span>
                    <div class="cooldown-overlay"></div>
                </div>
                <div class="ability-tooltip">护盾 (E)</div>
            </div>
            <div class="ability-icon" id="missile-ability">
                <div class="ability-inner">
                    <i class="ability-symbol">🚀</i>
                    <span class="ability-key">R</span>
                    <div class="cooldown-overlay"></div>
                </div>
                <div class="ability-tooltip">导弹 (R)</div>
            </div>
            <div class="ability-icon" id="charge-ability">
                <div class="ability-inner">
                    <i class="ability-symbol">⚡</i>
                    <span class="ability-key">Q</span>
                    <div class="cooldown-overlay"></div>
                </div>
                <div class="ability-tooltip">蓄力 (Q)</div>
            </div>
        </div>
        
        <!-- 主菜单 -->
        <div id="main-menu" class="menu">
            <h1>星际探险家</h1>
            <div class="menu-options">
                <button id="btn-start-game" class="glow-button">开始游戏</button>
                <button id="btn-tutorial" class="glow-button">游戏教程</button>
                <button id="btn-settings" class="glow-button">设置</button>
            </div>
        </div>

        <!-- 游戏教程 -->
        <div id="tutorial-menu" class="menu hidden">
            <h2>游戏教程</h2>
            <div class="tutorial-content">
                <div class="tutorial-section">
                    <h3>基本控制</h3>
                    <p><strong>移动：</strong> WASD - 控制飞船移动</p>
                    <p><strong>瞄准：</strong> 鼠标 - 控制飞船方向</p>
                    <p><strong>射击：</strong> 空格键/鼠标左键 - 发射主武器</p>
                    <p><strong>技能：</strong> E键 - 激活护盾</p>
                    <p><strong>暂停：</strong> ESC - 暂停游戏</p>
                </div>
                
                <div class="tutorial-section">
                    <h3>游戏目标</h3>
                    <p>1. 在星际中探索并收集各种资源</p>
                    <p>2. 击败来犯的外星敌人，保护自己</p>
                    <p>3. 利用收集的资源升级你的飞船</p>
                    <p>4. 尽可能生存更长时间，获得更高分数</p>
                </div>

                <div class="tutorial-section">
                    <h3>资源类型</h3>
                    <p><span style="color: #00b8ff;">⚡能量资源：</span> 恢复飞船能量，用于技能</p>
                    <p><span style="color: #ff4444;">❤生命资源：</span> 恢复飞船生命值</p>
                    <p><span style="color: #00ff88;">⭐升级资源：</span> 用于提升飞船性能</p>
                </div>

                <div class="tutorial-section">
                    <h3>飞船升级</h3>
                    <p><strong>速度升级：</strong> 提升飞船移动速度</p>
                    <p><strong>伤害升级：</strong> 增加武器伤害</p>
                    <p><strong>护盾升级：</strong> 提升护盾持续时间</p>
                </div>

                <div class="tutorial-section">
                    <h3>游戏技巧</h3>
                    <p>1. 注意观察敌人的攻击模式</p>
                    <p>2. 合理使用护盾躲避密集攻击</p>
                    <p>3. 优先收集生命资源保持生存</p>
                    <p>4. 在合适的时机进行升级</p>
                </div>
            </div>
            <button id="back-to-main" class="glow-button">返回主菜单</button>
        </div>

        <!-- 游戏设置 -->
        <div id="settings-menu" class="menu hidden">
            <h2>游戏设置</h2>
            <div class="settings-content">
                <div class="setting-item">
                    <label for="volume">音量</label>
                    <input type="range" id="volume" min="0" max="100" value="50">
                    <span id="volume-value">50</span>
                </div>
                <div class="setting-item">
                    <label for="difficulty">难度</label>
                    <select id="difficulty">
                        <option value="easy">简单</option>
                        <option value="medium" selected>中等</option>
                        <option value="hard">困难</option>
                    </select>
                </div>
                <div class="setting-item">
                    <label for="enemy-speed">敌人速度</label>
                    <input type="range" id="enemy-speed" min="1" max="5" value="3" step="0.5">
                    <span id="enemy-speed-value">3</span>
                </div>
                <div class="setting-item">
                    <label for="screen-mode">显示模式</label>
                    <select id="screen-mode">
                        <option value="windowed">窗口</option>
                        <option value="fullscreen">全屏</option>
                    </select>
                </div>
            </div>
            <div class="button-group">
                <button id="save-settings" class="glow-button">保存设置</button>
                <button id="back-to-main-2" class="glow-button">返回主菜单</button>
            </div>
        </div>
        <!-- 暂停菜单 -->
        <div id="pause-menu" class="menu hidden">
            <h2>游戏暂停</h2>
            <div class="menu-options">
                <button id="resume-game" class="glow-button">继续游戏</button>
                <button id="settings-game" class="glow-button">游戏设置</button>
                <button id="quit-game" class="glow-button warning">退出游戏</button>
            </div>
        </div>

        <!-- 游戏结束界面 -->
        <div id="game-over" class="menu hidden">
            <h2>游戏结束</h2>
            <div class="game-stats">
                <p>最终分数: <span id="final-score">0</span></p>
                <p>最高波次: <span id="final-wave">0</span></p>
                <p>击杀数: <span id="final-kills">0</span></p>
            </div>
            <div class="button-group">
                <button id="restart-game" class="glow-button">重新开始</button>
                <button id="back-to-main-3" class="glow-button">返回主菜单</button>
            </div>
        </div>
    </div>
    <script src="./script.js"></script>
    <script src="./background.js"></script>
</body>
</html>